<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标准规范</title>
    <meta name="renderer" content="webkit">
    <#--   <link rel="stylesheet" href="${re.contextPath}/plugin/lay/layui/css/layui.css">-->
    <!--layui样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--layui-dropdown-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/layui/dropdown_2.3.3/dropdown.css">
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/style.css"/>
    <!--扩展样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/common/css/extended.css">
    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
    <!-- 公共配置第三方组件 -->
    <script type="text/javascript">
        layui.config({
            version: false,
            debug: false,
            base: "${re.contextPath}/plugin/layui/dropdown_2.3.3/"
        })
    </script>
    <style>
        .select ul li:nth-child(4) > .ml10,
        .select ul li:nth-child(5) > .ml10 {
            margin-left: 5px;
        }

        .select ul li:nth-child(4) .money {
            width: 90%;
        }

        .select ul li:nth-child(5) .money {
            width: 71%;
        }

        .select ul li:nth-child(4) > div {
            width: 77%;
        }

        .select ul li:nth-child(4) .money > div {
            width: 48%;
        }

        .select ul li:nth-child(5) .money > div {
            width: 43%;
        }

        .select ul li:nth-child(4) .money > div input {
            width: 95%;
        }

        .select ul li:nth-child(5) .money > div input {
            width: 60%;
        }

        .layu-menu-item-wrap {
            float: none !important;
            width: 100% !important;
        }

        .screening ul li input {
            width: 65%;
            padding-left: 5%;
            border: 0;
        }

        .screening ul li > select {
            border: 1px solid #DDDDDD;
        }

        .screening .money div {
            border: 1px solid #DDDDDD;
        }
    </style>
</head>
<body>


<div class="screening whitebg clearfix">
    <div class="select">
        <ul class="clearfix">
            <li>
                <span>接收人</span>
                <input type="text" style="border:1px solid #DDDDDD;" name="receiveName" id="receiveName" placeholder="请输入接收人">
            </li>
            <li>
                <span>是否已读</span>
                <select id="isView">
                    <option value="">请选择</option>
                    <option value="0">未读</option>
                    <option value="1">已读</option>
                </select>
            </li>
            <li>
                <button href="#" class=" ft14 btn_my"  style="background-color: #1e9fff;width: 108px;color: white" onclick="query()">筛选</button>
                <button href="#" class=" ft14 btn_del" style="background-color: #009688;width: 108px;color: white" onclick="reset()">重置</button>
            </li>
        </ul>
            <table id="stageList" class="layui-hide" lay-filter="stage"></table>

    </div>
</div>


</div>

<style>
    /* 容器样式 */
    .whitebg {
        background-color: #fff;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .maxfont{
        font-size: 20px;
        font-weight: bolder;
        overflow: hidden;
        white-space: nowrap;       /* 防止文字换行 */
        overflow: hidden;          /* 隐藏溢出的内容 */
        text-overflow: ellipsis;   /* 溢出部分显示为省略号 */
    }
    .fontitem{
        font-size: 18px;
        color: #0C0C0C;
    }
    .fontitemshow{
        font-size: 18px;
        overflow: hidden;
        white-space: nowrap;       /* 防止文字换行 */
        overflow: hidden;          /* 隐藏溢出的内容 */
        text-overflow: ellipsis;   /* 溢出部分显示为省略号 */
        display: inline-block;     /* 确保 span 元素可以设置宽度 */
        width: 500px;

    }
    .list-container {
        display: flex;
        align-items: flex-start;
        font-size: 20px;

    }

    /* 固定的 li 样式 */
    .fixed-li {
        position: sticky;
        left: 0;
        z-index: 1;
        margin-right: 10px;
    }

    .liui {
        display: flex;
        overflow-x: auto;
    }

    /* 基本样式 */
    .selectli {
        padding: 10px;
        cursor: pointer;
        line-height: 60px;
        min-width: 150px;
        max-width: 300px;
        min-height: 60px;
        background-color: #f9f9f9;
        transition: background-color 0.3s;
        display: inline-block;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;


    }
    .selectli:hover {
        background-color: #e0e0e0;
    }

    .selectli.active {
        border-bottom: 5px solid #0A79FF;
        color: #0A79FF;
        background-color: #d9e4ff;
    }

    /* 滚动条样式 */
    .selectli::-webkit-scrollbar {
        height: 8px;
        background-color: #f1f1f1;
    }

    .selectli::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 5px;
    }

    .selectli::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 5px;
    }

    .selectli::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    /* Firefox */
    .selectli {
        scrollbar-width: thin;
        scrollbar-color: #888 #f1f1f1;
    }

    /* IE 和 Edge */
    .selectli {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }


</Style>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/html" id="toolBarStage">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delStage">删除</a>
    <a class="layui-btn  layui-btn-xs" lay-event="detail">查看</a>
</script>
<script type="text/html" id="stageToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addAStage">新增</button>

    </div>
</script>
<script type="text/html" id="milepostToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addMilepost">新增</button>
    </div>
</script>
<script>
    $("div[lay-event='LAYTABLE_COLS']").hide()
    $("div[lay-event='LAYTABLE_EXPORT']").hide()
    $("div[lay-event='LAYTABLE_PRINT']").hide()
    var fbId = "";

    // 页面加载完毕，执行点击clickzt
    $(function () {
        setTimeout(function () {
            fbId=""
            queryStage('1')

        }, 100);

    })



    var type = "${type}";
    var projectId = '${projectInfo.id}';
    var layer;
    var form = layui.form;
    var table = null;
    var tableIns = null;
    document.onkeydown = function (e) { // 回车提交表单
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which;
        if (code == 13) {
            $(".select .select-on").click();
        }
    }
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    var element, dropdown;
    layui.use(['element', 'dropdown'], function () {
        element = layui.element , dropdown = layui.dropdown;
    });
    var selectedRowId = null;
  var parentId=''
    layui.use('table', function () {
        table = layui.table;
        element = element;
        //方法级渲染
        stageTableIns = table.render({
            id: 'stageList',
            elem: '#stageList',
            url: '/project/projectManager/queryNoticeList?projectId='+projectId+'&type=1',
            toolbar: '#stageToolbar',
            page: true,
            cols: [[
                // {field: 'orderNum', title: '序号', width: '70', sort: false},
                // {field: 'stageName', title: '项目阶段', width:'800', sort: false},
                // {field: 'startDateStr', title: '开始时间', width: '120', sort: false},
                // {field: 'endDateStr', title: '结束时间', width: '120',sort: false},
                // {field: 'remark', title: '操作', width: '120', toolbar: "#toolBarStage"}
                {
                    title: '序号', width: '10%', totalRowText: '合计',align: 'center', templet: function (res) {
                        return res.LAY_INDEX;
                    }
                },
                {field: 'content', title: '消息', width:'25%',align: 'center', sort: false},
                {field: 'realName', title: '发起人', width: '10%',align: 'center', sort: false},
                {field: 'receiveName', title: '接收人', width: '10%', align: 'center',sort: false},
                {field: 'createDateStr', title: '发起时间', width: '20%',align: 'center', sort: false},
                {field: 'isView', title: '是否已读', width: '10%', sort: false,align: 'center', templet: function (d) {
                    if (d.isView=='1'){
                        return '已读'
                    }else{
                        return '<span style="color: red;">未读</span>';
                    }
                    } },
                {field: 'remark', title: '操作', width: '15%', toolbar: "#toolBarStage"}
            ]],
            done: function (res, currentCount) {
                //***重点***：table渲染完成后渲染element进度条
                element.render()
                //把有这个属性的 lay-event="LAYTABLE_COLS" 标签隐藏
                $("div[lay-event='LAYTABLE_COLS']").hide()
                $("div[lay-event='LAYTABLE_EXPORT']").hide()
                $("div[lay-event='LAYTABLE_PRINT']").hide()


            }
        });

        table.on('checkbox(stage)', function (obj) {
            console.log(obj)
        });
        table.on('tool(stage)', function (obj) {
            console.log("mmmmmmmmmmmmmmmmmmmmmmmmmmmmm")
            var data = obj.data;
            if (obj.event === 'detailStage') {
                layer.alert('您所查看的项目阶段是：[<label style="color: #00AA91;">' + data.stageName + '</label>]')
            }
            if (obj.event === 'editStage') {

            }
            if (obj.event === 'delStage') {
                console.log(data,"=======================")
                layer.confirm('是否确定删除数据?', function () {
                    delStage(data.noticeId);
                });
            }
            if (obj.event === 'detail') {
                layer.open({
                    type: 1,
                    title: '消息内容',
                    area: ['600px', '400px'],
                    content: '<div style="padding: 20px;">' + data.content + '</div>',
                    btn: ['确定'],
                    yes: function (index, layero) {
                        layer.close(index);
                    }
                });

            }
        })
        table.on('row(stage)', function (obj) {
            var data = obj.data;
            // stageId = data.id
            selectedRowId = data.id;
            // //标注选中样式
             obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });
        table.on('toolbar(stage)', function (obj) {
            switch (obj.event) {
                case 'addAStage':
                    addStage();
                    break;
                 case 'viewstageprocess':
                   viewstageprocess();

            }
            ;
        })
    })


    function delStage(id) {
      console.log(id,"ppppppppppppppp")
        layerAjax('/project/projectManager/notice/deleteNotice', {ids:id}, '', function (d) {
            if (d.flag == true) {
                stageTableIns.reload();
                layer.msg("操作成功",{icon: 1});
            } else {
                layer.msg(d.msg, {icon: 1});
            }
            console.log(d);
        });
    }



    function addStage() {
        var w = 800;
        var h = 600;
        layer.open({
            id: 'stage-add',
            type: 2,
            area: [w+'px', h+'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: "发送消息",
            content: '/project/projectManager/projectNotice/sendNoticePage',
            yes: function(){

            },
            btn2: function(){
                layer.closeAll();
            },
            zIndex: layer.zIndex, //重点1,
            success: function(layero){
                layer.setTop(layero); //重点2
            },
            end: function () {
                stageTableIns.reload();
            }
        });
    }


    function queryStage(type) {
        // alert(id)
        var id = id;
        var jsondata = {
            fbId: fbId,
            xmType: type
        };
        parentId=id;
        console.log(jsondata,"0000000000000000000000000");
        table.reload('stageList', {
            where: jsondata
        });
    }




    function reset() {
        $('#receiveName').val("");
        $('#isView').val("");
        var jsondata = {
            receiveName: "",
            isView: ""
        };
        table.reload('stageList', {where: jsondata});
    }

    function query() {
        var receiveName = $('#receiveName').val();
        var isView = $('#isView').val();
        var jsondata = {
            receiveName: receiveName,
            isView: isView
        };
        table.reload('stageList', {where: jsondata});
    }






</script>

<script type="text/html" id="shbz">
    {{#  if(d.shbz == '0'){ }}
    停用
    {{#  } else if(d.shbz == '1'){ }}
    正常
    {{#  } else{ }}
    '
    <div class="layui-progress layui-progress-big" lay-showpercent="true">
        <div class="layui-progress-bar layui-bg-orange" lay-percent="222%">111111</div>
    </div><br>'

    {{#  }  }}

</script>


<script type="text/html" id="zt">
    {{#  if(d.status == '000'){ }}
    已删除
    {{#  } else if(d.status == '001'){ }}
    未提交
    {{#  } else if(d.status == '002'){ }}
    未启动
    {{#  } else if(d.status == '004'){ }}
    进行中
    {{#  } else if(d.status == '003'){ }}
    已完成
    {{#  } else if(d.status == '005'){ }}
    未已延期
    {{#  } }}
</script>

</body>

</html>
